<!--
 * @Author: chengjiang
 * @Date: 2024-11-06 11:18:37
 * @Description: 
-->
<template>
  <a-button class="editable-add-btn mb-2 float-right" @click="refresh">
    <RedoOutlined />
  </a-button>
  <a-button type="primary" class="editable-add-btn mb-2 mr-5 float-right" @click="handleAdd" disabled>添加</a-button>
  <a-table bordered :data-source="dataSource" :columns="columns">
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.dataIndex === 'title'">
        <div class="editable-cell">
          <div v-if="editableData[record.key]" class="editable-cell-input-wrapper">
            <a-input v-model:value="editableData[record.key].title" @pressEnter="save(record.key)" />
            <check-outlined class="editable-cell-icon-check" @click="save(record.key)" />
          </div>
          <div v-else class="editable-cell-text-wrapper">
            {{ text || ' ' }}
            <edit-outlined class="editable-cell-icon" @click="edit(record.key)" />
          </div>
        </div>
      </template>
      <template v-else-if="column.dataIndex === 'desc'">
        <div class="editable-cell">
          <div v-if="editableData[record.key]" class="editable-cell-input-wrapper">
            <a-input v-model:value="editableData[record.key].desc" @pressEnter="save(record.key)" />
            <check-outlined class="editable-cell-icon-check" @click="save(record.key)" />
          </div>
          <div v-else class="editable-cell-text-wrapper">
            {{ text || ' ' }}
            <edit-outlined class="editable-cell-icon" @click="edit(record.key)" />
          </div>
        </div>
      </template>
      <template v-else-if="column.dataIndex === 'operation'">
        <a-popconfirm v-if="dataSource.length" title="Sure to delete?" @confirm="onDelete(record.key)">
          <a>删除</a>
        </a-popconfirm>
      </template>
    </template>
  </a-table>
</template>

<script lang="ts" setup>
import { RedoOutlined } from '@ant-design/icons-vue';
import { computed, reactive, ref } from 'vue';
import type { Ref, UnwrapRef } from 'vue';
import { CheckOutlined, EditOutlined } from '@ant-design/icons-vue';
import { cloneDeep } from 'lodash-es';
import { SaveTitle, ListTitle, UpdateTitle } from '../../../api/footer';
import { message } from 'ant-design-vue';
const prp = defineProps<{
  pageType: number // 0: 看价盘，1: customer临售盘
}>()
interface DataItem {
  key: number;
  title: string;
  desc: string;
}
console.log(SaveTitle, ListTitle)
const columns = [
  {
    title: '标题',
    dataIndex: 'title',
    width: '30%',
  },
  {
    title: '描述',
    dataIndex: 'desc',
  },
  {
    title: '操作',
    dataIndex: 'operation',
  },
];

// 获取数据列表：initFunc
const key = 'getList';
message.loading({ content: '加载数据...', key });
let dataSource: Ref<DataItem[]> = ref([]);
const initFunc = async () => {
  const listRet = ListTitle({ priceType: prp.pageType })
  listRet.then((res) => {
    const lst = res.data
    for (const val of lst) {
      dataSource.value.push({
        key: val.id,
        title: val.name,
        desc: val.description,
      })
    }
    message.success({ content: '获取成功!', key, duration: 2 });
  }).catch(() => {
    dataSource = ref([
      {
        key: 0,
        title: 'Edward King 0',
        desc: 'London, Park Lane no. 0',
      },
      {
        key: 1,
        title: 'Edward King 1',
        desc: 'London, Park Lane no. 1',
      },
    ]);
    message.error({ content: '获取数据失败!', key, duration: 2 });
  })
};
initFunc();

// 刷新方法：
const refresh = () => {
  dataSource.value = []
  message.loading({ content: '加载数据...', key });
  initFunc();
}

const count = computed(() => dataSource.value.length + 1);
const editableData: UnwrapRef<Record<string, DataItem>> = reactive({});

const edit = (key: number) => {
  editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.key)[0]);
};
const save = (key: number) => {
  Object.assign(dataSource.value.filter(item => key === item.key)[0], editableData[key]);
  UpdateTitle(editableData[key].key, {
    id: editableData[key].key,
    name: editableData[key].title,
    description: editableData[key].desc,
    priceType: prp.pageType
  }).then(() => {
    message.success('保存成功')
  }).catch(() => {
    message.error('保存失败')
  })
  delete editableData[key];
};

const onDelete = (key: number) => {
  dataSource.value = dataSource.value.filter(item => item.key !== key);
};
const handleAdd = () => {
  const newData = {
    key: count.value,
    title: ``,
    desc: ``,
  };

  SaveTitle({
    id: newData.key,
    name: newData.title,
    description: newData.desc,
    priceType: prp.pageType
  }).then(() => {
    dataSource.value.push(newData);
    message.success('新增成功')
  }).catch(() => {
    message.error('新增失败')
  })
};
</script>

<style lang="less">
.editable-cell {
  position: relative;

  .editable-cell-input-wrapper,
  .editable-cell-text-wrapper {
    padding-right: 24px;
  }

  .editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
  }

  .editable-cell-icon,
  .editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
  }

  .editable-cell-icon {
    margin-top: 4px;
    display: none;
  }

  .editable-cell-icon-check {
    line-height: 28px;
  }

  .editable-cell-icon:hover,
  .editable-cell-icon-check:hover {
    color: #108ee9;
  }

  .editable-add-btn {
    margin-bottom: 8px;
  }
}

.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}
</style>